<template>
	<div>
		<a-list
			v-if="items.length > 0"
			:class="classNames"
			item-layout="horizontal"
			:data-source="items"
			:locale="getLocale"
		>
			<template #renderItem="{ item, index }">
				<AppListItem
					:item="item"
					:key="index"
					:class="getListItemClassNames(item, true)"
					@click="handleClick(item, $event)"
					@dblclick="handleDbClick(item, $event)"
					@expanedChange="(value) => handleExpanedChange(item, value)"
				>
					<template #listItemTitle v-if="item.isGroupItem">
						{{ item.srfmajortext }}
					</template>
					<template #listItemTitle v-else-if="hasSlot('listItemTitle')">
						<slot name="listItemTitle" :item="item"></slot>
					</template>
					<template #default v-if="!item.isGroupItem && hasSlot('default')">
						<slot name="default" :item="item"></slot>
					</template>
					<template
						#listItemIcon
						v-if="!item.isGroupItem && hasSlot('listItemIcon')"
					>
						<slot name="listItemIcon" :item="item"></slot>
					</template>
					<template
						#listItemActions
						v-if="
							!item.isGroupItem &&
							(item.uIActionGroup || hasSlot('listItemActions'))
						"
					>
						<slot
							v-if="hasSlot('listItemActions')"
							name="listItemActions"
							:item="item"
						></slot>
						<div v-else class="app-list-item-actions">
							<template
								v-for="(action, index1) in item.uIActionGroup"
								:key="index1"
							>
								<AppButton
									type="link"
									v-show="action.visible"
									:disabled="action.disabled"
									@click="(event: MouseEvent) => handleActionClick(event, action, item)"
								>
									<AppIconText
										:iconClass="action.showIcon && action.iconClass"
										:imgPath="action.showIcon && action.imgPath"
										:text="action.showCaption && action.caption"
									/>
								</AppButton>
							</template>
						</div>
					</template>
				</AppListItem>
				<template v-if="item && item.isGroupItem && item.isExpand">
					<AppListItem
						v-for="(children, _index) in item.children"
						:key="_index"
						:item="children"
						:class="getListItemClassNames(children, true)"
						@click="handleClick(children, $event)"
						@dblclick="handleDbClick(children, $event)"
					>
						<template #default v-if="hasSlot('default')">
							<slot name="default" :item="children"></slot>
						</template>
						<template #listItemTitle v-if="hasSlot('listItemTitle')">
							<slot name="listItemTitle" :item="children"></slot>
						</template>
						<template #listItemIcon v-if="hasSlot('listItemIcon')">
							<slot name="listItemIcon" :item="children"></slot>
						</template>
						<template
							#listItemActions
							v-if="item.uIActionGroup || hasSlot('listItemActions')"
						>
							<slot
								v-if="hasSlot('listItemActions')"
								name="listItemActions"
								:item="children"
							></slot>
							<div v-else class="app-list-item-actions">
								<template
									v-for="(action, index1) in item.uIActionGroup"
									:key="index1"
								>
									<AppButton
										type="link"
										v-show="action.visible"
										:disabled="action.disabled"
										@click.stop="(event: MouseEvent) => handleActionClick(event, action, children)"
									>
										<AppIconText
											:iconClass="action.showIcon && action.iconClass"
											:imgPath="action.showIcon && action.imgPath"
											:text="action.showCaption && action.caption"
										/>
									</AppButton>
								</template>
							</div>
						</template>
					</AppListItem>
				</template>
				<template
					v-if="
						loadMore &&
						index === items.length - 1 &&
						items.length > 0 &&
						items.length < totalRecord
					"
				>
					<div class="load-more">
						<AppButton type="link" @click.stop="handleLoadMore"
							>{{ $t('widget.list.loadmore', '加载更多') }}
						</AppButton>
					</div>
				</template>
			</template>
		</a-list>
		<AppEmptyDataTip
			v-else
			:emptyText="$t(emptyTextPSLanguageRes, emptyText)"
		></AppEmptyDataTip>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import AppListItem from './components/list-item.vue';
import AppEmptyDataTip from '@/components/common/empty-data-tip/src/empty-data-tip.vue';
import { IListItem, ListProps } from './list';
const props = defineProps(ListProps);

const emit = defineEmits<{
	(name: 'selectionChange', selections: IParam[]): void;
	(name: 'itemClick', item: IListItem, event: MouseEvent): void;
	(name: 'itemDbClick', item: IListItem, event: MouseEvent): void;
	(
		name: 'itemActionClick',
		logic: IParam,
		data: IParam,
		event: MouseEvent
	): void;
	(name: 'loadMore'): void;
}>();

const classNames = computed(() => {
	return {
		'app-control-list__empty': props.items.length === 0,
		'app-control-list__pagination': props.loadMore,
	};
});

//  获取显示文本
const getLocale = computed(() => {
	return {
		emptyText:
			App.ts(props.emptyTextPSLanguageRes, props.emptyText) ||
			App.ts('widget.list.nodata', '暂无数据'),
	};
});

const getSelected = (item: IListItem): boolean => {
	return (
		props.selections.findIndex((s: IParam) => s.srfkey === item.srfkey) !== -1
	);
};

//  获取列表项类名
const getListItemClassNames = (item: IListItem, isChildren = false) => {
	return {
		'app-list-item': true,
		'app-list-group-item': item.isGroupItem,
		'app-list-item__children': isChildren,
		'app-list-item--selected': getSelected(item),
	};
};

//  是否有该插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleClick = (item: IListItem, event: MouseEvent) => {
	//  点击分组行抛出选中变更
	if (item.isGroupItem) {
		item.isExpand = !item.isExpand;
		return;
	}
	emit('itemClick', item, event);
};

const handleDbClick = (item: IListItem, event: MouseEvent) => {
	if (!item.isGroupItem) {
		emit('itemDbClick', item, event);
	}
};

const handleExpanedChange = (item: IListItem, isExpand: boolean) => {
	item.isExpand = isExpand;
};

const handleLoadMore = (e: MouseEvent) => {
	emit('loadMore');
};

const handleActionClick = (event: MouseEvent, logic: IParam, data: IParam) => {
	event.stopPropagation();
	event.preventDefault();
	emit('itemActionClick', logic, data, event);
};
</script>
